<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS016-搜索框案例</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #222;
        color: gray;
    }

    a {
        color: skyblue;
        text-decoration: none;
    }

    ul {
        list-style: none;
    }

    input {
        outline: none;
    }

    /* 禁用webkit搜索框自带的删除已有内容的按钮 */
    input[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    div.container {
        padding: 2em;
        margin: 1em;
        display: inline-flex;
        border: 1px solid aliceblue;
    }

    div.search-box {
        width: 15em;
        display: inline-flex;
        flex-direction: column;
    }

    /* 选取搜索框的推荐写法 */
    input[type=search] {
        height: 2.5rem;
        padding-left: .75em;
        font-size: 1em;
        color: deepskyblue;
        background-color: #334;
        border: 1px solid aliceblue;
        transition: 200ms;
    }

    input[type=search].focused {
        border: 1px solid deepskyblue;
    }

    ul.result-list {
        border: 1px solid deepskyblue;
        border-top: none;
        display: none;
    }

    ul.result-list li a {
        height: 2em;
        padding: .5em .75em;
        display: flex;
        align-items: center;
        background-color: #223;
        transition: 200ms;
    }

    ul.result-list li a:hover {
        background-color: #334;
    }
</style>

<body>
    <div class="container">
        <div class="search-box">
            <input type="search" name="search" id="search" placeholder="这是何意呢？" />
            <ul class="result-list">
                <li><a href="">深蓝互动</a></li>
                <li><a href="#">鹰角网络</a></li>
                <li><a href="#">库洛游戏</a></li>
                <li><a href="#">米哈游</a></li>
                <li><a href="#">任天堂</a></li>
                <li><a href="#">科乐美</a></li>
                <li><a href="#">索尼</a></li>
            </ul>
        </div>
    </div>
    <script>
        const searchBox = document.querySelector('.search-box')
        const searchInput = document.querySelector('input[type=search]')
        const resultList = document.querySelector('ul.result-list')
        const asToPreventDefault = document.querySelectorAll('ul.result-list a')

        asToPreventDefault.forEach(a => {
            a.addEventListener('click', e => e.preventDefault())
        })

        document.addEventListener('click', e => {
            //点击了不是searchBox内部元素的元素
            if (!searchBox.contains(e.target)) {
                resultList.style.display = 'none'
            }
        })

        searchInput.addEventListener('focus', () => {
            searchInput.classList.add('focused')
            resultList.style.display = 'block'
        })

        searchInput.addEventListener('blur', () => {
            searchInput.classList.remove('focused')
        })
    </script>
</body>

</html>